<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索与增加网址</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 设置页面背景色 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
        }

        /* 页面容器 */
        .container {
            text-align: center;
            max-width: 600px;
            width: 100%;
        }

        /* 搜索框的标题文字 */
        .search-title {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

        /* 搜索框和按钮容器 */
        .search-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 30px;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        /* 输入框样式 */
        .search-input {
            width: 250px;
            padding: 10px;
            border-radius: 15px;
            border: 1px solid #ddd;
            font-size: 16px;
            margin-right: 10px;
        }

        /* 搜索图标按钮样式 */
        .search-icon {
            padding: 10px;
            background-color: transparent;
            color: #0078d4;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            font-size: 18px;
        }

        .search-icon:hover {
            background-color: #f0f0f0;
        }

        /* 增加网址按钮 */
.add-url-btn {
    padding: 10px;
    background-color: transparent;
    color: #0078d4;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* 将按钮推到容器的最右边 */
}

        .add-url-btn:hover {
            background-color: #f0f0f0;
        }

        /* 弹出框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 300px;
        }

        .modal input {
            width: 80%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        .modal button {
            padding: 10px 20px;
            background-color: #0078d4;
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
        }

        .modal button:hover {
            background-color: #005a8b;
        }

/* 网页按钮容器 */
.url-buttons-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: flex-start; /* 按钮从左侧开始排列 */
    gap: 10px; /* 按钮之间的间隔 */
    width: 100%;
}

        .url-button {
            padding: 10px 15px;
            background-color: #0078d4;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            white-space: nowrap;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .url-button:hover {
            background-color: #005a8b;
        }

        /* 右键菜单 */
        .context-menu {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: none;
            z-index: 1000;
        }

        .context-menu button {
            padding: 8px 12px;
            border: none;
            background-color: white;
            cursor: pointer;
            width: 200px;
            text-align: left;
        }

        .context-menu button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 搜索框和按钮 -->
        <div class="search-title">Search</div>
        <div class="search-container">
            <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容" />
            <button class="search-icon" onclick="search()">
                <i class="fas fa-search"></i> <!-- 搜索图标 -->
            </button>
        </div>

<!-- 存放已增加的网址按钮 -->
<div class="url-buttons-container" id="urlButtonsContainer">
    <!-- 增加网址按钮 -->
    <button class="add-url-btn" onclick="openModal()">
        <i class="fas fa-plus"></i> <!-- 增加图标 -->
    </button>
</div>


        <!-- 增加网址弹出框 -->
        <div class="modal" id="modal">
            <div class="modal-content">
                <input type="text" id="urlName" placeholder="网页名" />
                <input type="text" id="urlLink" placeholder="网址" />
                <button onclick="addUrl()">确定</button>
            </div>
        </div>

        
    </div>

    <!-- 右键菜单 -->
    <div id="contextMenu" class="context-menu">
        <div><button onclick="editUrl()">编辑</button></div>
        <div><button onclick="deleteUrl()">删除</button></div>
        <div><button onclick="openInNewTab()">新标签页打开</button></div>
    </div>

    <script>
        let currentButton = null;

        // 处理回车键触发搜索
        document.getElementById('searchInput').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                search();
            }
        });

        // 搜索函数
        function search() {
            var query = document.getElementById('searchInput').value;
            if (query) {
                var url = 'https://cn.bing.com/search?q=' + encodeURIComponent(query);
                window.location.href = url;
            } else {
                alert('请输入搜索内容');
            }
        }

        // 打开增加网址的弹出框
        function openModal() {
            document.getElementById('modal').style.display = 'flex';
        }

        // 关闭增加网址的弹出框
        function closeModal() {
            document.getElementById('modal').style.display = 'none';
        }

        // 增加网址按钮
        function addUrl() {
            var urlName = document.getElementById('urlName').value;
            var urlLink = document.getElementById('urlLink').value;

            // 确保网址以 http:// 或 https:// 开头
            if (urlLink && !urlLink.startsWith('http://') && !urlLink.startsWith('https://')) {
                urlLink = 'http://' + urlLink;
            }

            if (urlName && urlLink) {
                // 创建新的按钮
                var urlButton = document.createElement('button');
                urlButton.className = 'url-button';
                urlButton.textContent = urlName;
                urlButton.setAttribute('data-link', urlLink); // 使用自定义属性存储链接
                urlButton.onclick = function() {
                    window.location.href = urlLink;
                };

                // 为按钮绑定右键菜单
                urlButton.oncontextmenu = function(event) {
                    event.preventDefault();
                    currentButton = urlButton;
                    showContextMenu(event);
                };

                //document.getElementById('urlButtonsContainer').appendChild(urlButton);
// 将新增的按钮插入到加号按钮的左侧
        var container = document.getElementById('urlButtonsContainer');
        container.insertBefore(urlButton, container.lastElementChild); // `container.lastElementChild` 是加号按钮
                // 保存网址按钮到 localStorage
                saveUrls();

                // 关闭弹窗
                closeModal();
            } else {
                alert('请填写完整的信息');
            }
        }

        // 显示右键菜单
        function showContextMenu(event) {
            var contextMenu = document.getElementById('contextMenu');
            contextMenu.style.left = event.pageX + 'px';
            contextMenu.style.top = event.pageY + 'px';
            contextMenu.style.display = 'block';
        }

        // 隐藏右键菜单
        document.addEventListener('click', function() {
            document.getElementById('contextMenu').style.display = 'none';
        });

        // 编辑网址
        function editUrl() {
            var urlName = prompt('编辑网页名', currentButton.textContent);
            var urlLink = prompt('编辑网址', currentButton.getAttribute('data-link'));
            if (urlName && urlLink) {
                currentButton.textContent = urlName;
                currentButton.setAttribute('data-link', urlLink);
                saveUrls();
            }
        }

        // 删除网址
        function deleteUrl() {
            currentButton.remove();
            saveUrls();
        }

        // 在新标签页打开网址
        function openInNewTab() {
            window.open(currentButton.getAttribute('data-link'), '_blank');
        }

        // 保存网址按钮到 localStorage
        function saveUrls() {
            var buttons = document.querySelectorAll('.url-button');
            var urls = [];
            buttons.forEach(function(button) {
                var urlName = button.textContent;
                var urlLink = button.getAttribute('data-link');
                urls.push({ name: urlName, link: urlLink });
            });
            // 将按钮信息以 JSON 格式保存到 localStorage
            localStorage.setItem('urls', JSON.stringify(urls));
        }

        // 页面加载时，加载已保存的网址
        function loadUrls() {
            var savedUrls = localStorage.getItem('urls');
            if (savedUrls) {
                var urls = JSON.parse(savedUrls);
                urls.forEach(function(url) {
                    var urlButton = document.createElement('button');
                    urlButton.className = 'url-button';
                    urlButton.textContent = url.name;
                    urlButton.setAttribute('data-link', url.link);
                    urlButton.onclick = function() {
                        window.location.href = url.link;
                    };

                    // 为按钮绑定右键菜单
                    urlButton.oncontextmenu = function(event) {
                        event.preventDefault();
                        currentButton = urlButton;
                        showContextMenu(event);
                    };

                   // document.getElementById('urlButtonsContainer').appendChild(urlButton);
// 将按钮插入到加号按钮的左侧
            document.getElementById('urlButtonsContainer').insertBefore(urlButton, document.querySelector('.add-url-btn'));
                });
            }
        }

        // 页面加载时调用 loadUrls 函数
        window.onload = loadUrls;
    </script>

</body>
</html>
